<template>



  <div class="custom-tree-container" style="width: 40%;">

    <div class="block">
      <div class="mb-10">
        <el-button size="small" type="success" @click="handleAddTotal">新增总厂</el-button>
      </div>
      <el-tree :data="data" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{node.label}}</span>
            <span>
              <el-button class="success" type="text" @click="() => addfactoryItem(node, data) " v-if="node.level<3">新增</el-button>
              <el-button type="text" @click="() => editfactoryItem(node, data) ">编辑</el-button>
              <el-button class="danger" type="text" @click="() => remove(node, data) ">删除</el-button>
            </span>
        </span>
      </el-tree>


    </div>

  <!--  <div>
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>

          </el-form-item>
        </el-form>
      </el-col>
    </div> -->

    <!--新增界面-->
    <el-dialog title="新增" :visible.sync='addFormVisible' :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="所属" prop="name">
          <el-input v-model="addForm.superName" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="工厂名称">
          <el-input v-model="addForm.newName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用电设备" v-if="addForm.level == 2">
          <el-radio-group class="flex-column-between" v-model="addForm.roomType">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="success" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync='editFormVisible' :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
       <!-- <el-form-item label="所属" prop="name">
          <el-input v-model="editForm.superName" auto-complete="off" :disabled="true"></el-input>
        </el-form-item> -->
        <el-form-item label="工厂名称">
          <el-input v-model="editForm.newName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用电设备" v-if="editForm.level == 3">
          <el-radio-group class="flex-column-between" v-model="editForm.roomType">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="success" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>



</template>
<script>
  export default {
    mounted() {
      this.getAllFactory();
    },
    data() {
      var data = [];
      return {
        data: JSON.parse(JSON.stringify(data)),
        // data: JSON.parse(JSON.stringify(data))
        defaultProps: {
          label: 'name',
          children: 'list'
        },
        addForm: {
          superName: '',
          newName: '',
          superId: '',
          level: '',
          roomType: 0
        },
        addFormVisible: false, //新增界面是否显示
        addLoading: false,
        addFormRules: {
          newName: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }]
        },
        editForm: {
          superName: '',
          newName: '',
          id: '',
          level: '',
          superId:'',
          roomType: 0
        },
        editFormVisible: false, //新增界面是否显示
        editLoading: false,
        editFormRules: {
          newName: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }]
        },


      }
    },

    methods: {
      getAllFactory() {
        this.api.get('/work/awbFactory/findFactoryTree').then((res) => {
          this.data = res.data.result;
        });
      },
      handleAddTotal () {
        this.addForm = {
          superName: '无',
          newName: '',
          level: '0',
          superId: '0',
          roomType: 0
        };

        this.addFormVisible = true;

      },
      addfactoryItem(node, data) {


        if(node.level == 3){
          this.$message('车间无法新增下级单位');

        }else{
          this.addFormVisible = true;

          this.addForm = {
            superName: data.name,
            newName: '',
            level: node.level,
            superId: data.id,
            roomType: 0,
          };

        }





      },
      //新增
      addSubmit: function() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;

              var params = {

                  current: this.addForm.level,
                  name: this.addForm.newName,
                  superId: this.addForm.superId,
                  roomType: this.addForm.roomType,

                }
                this.api.post('/work/awbFactory/add', params).then((res) => {
                  if(res){
                    this.addFormVisible = false;
                    this.getAllFactory();
                  }
                  this.addLoading = false;
                });



            });
          }
        });
      },
      append(data) {
        // const newChild = {
        //   id: id++,
        //   label: '厂房N',
        //   children: []
        // };
        // if (!data.children) {
        //   this.$set(data, 'children', []);
        // }
        // data.children.push(newChild);
      },
      editfactoryItem(node, data) {


        this.editFormVisible = true;

        this.editForm = {
          superName: data.name,
          newName: node.name,
          level: node.level,
          id: data.id,
          superId: data.superId,
          roomType: data.roomType,
        };



      },
      editSubmit: function() {

        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;


              var params = {

                current:  this.editForm.level,
                id: this.editForm.id,
                name: this.editForm.newName,
                superId: this.editForm.superId,
                roomType: this.editForm.roomType,

              }
              this.api.post('/work/awbFactory/edit', params).then((res) => {
                if(res){
                  this.editFormVisible = false;
                  this.$message.success('操作成功');
                  this.getAllFactory();
                }
                  this.editLoading = false;
              });



            });
          }
        });
      },

      remove(node, data) {

        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {


          var params = {
            id: data.id,
          }
          this.api.post('/work/awbFactory/delete', params).then((res) => {
            this.$message.success('操作成功');
            this.getAllFactory();

          });
        }).catch(() => {

        });


      },
      }
    };
</script>
<style lang="less" scoped>
  .el-tree{
    margin-right: 10px;
    width: 400px;
    padding: 10px;
    font-size: 16px;
  }
  .success{
    color: #67C23A;
  }
  .success:hover{
    color: #85ce61;
  }
  .danger{
    color: #F56C6C;
  }
  .danger:hover{
    color: #f78989;
  }
  /deep/ .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
    font-size: 14px;
  }
  /deep/ .el-radio{
    line-height: 40px;
  }
</style>
